<#include "/WEB-INF/template/common/layout/l_admin.ftl"/>
<#include "/WEB-INF/template/common/macro/libs.ftl"/>
<@adminLayout>
<div class="page-content-body">
<#--弹出层-->
    <#--<@themetool/>-->
    <#--面包屑-->
    <@breadcrumb view=breadcrumbView/>
    <#--状态-->
    <@status4/>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="portlet solid bordered light-grey">
            <div class="portlet-title">
                <div class="caption"><i class="fa fa-bar-chart-o"></i>用户数据</div>
                <div class="tools">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn default btn-sm active">
                            <input type="radio" name="options" class="toggle" id="option1">Users
                        </label>
                        <label class="btn default btn-sm">
                            <input type="radio" name="options" class="toggle" id="option2">Feedbacks
                        </label>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <div id="site_statistics_loading" style="display: none;">
                    <img src="plugin/assets/img/loading.gif" alt="loading">
                </div>
                <div id="site_statistics_content" class="display-none" style="display: block;">
                    <div id="site_statistics1" class="chart" style="padding: 0px; position: relative;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="portlet solid bordered light-grey">
            <div class="portlet-title">
                <div class="caption"><i class="fa fa-bar-chart-o"></i>用户数据</div>
                <div class="tools">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn default btn-sm active">
                            <input type="radio" name="options" class="toggle" id="option1">Users
                        </label>
                        <label class="btn default btn-sm">
                            <input type="radio" name="options" class="toggle" id="option2">Feedbacks
                        </label>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <div id="site_statistics_loading" style="display: none;">
                    <img src="plugin/assets/img/loading.gif" alt="loading">
                </div>
                <div id="site_statistics_content" class="display-none" style="display: block;">
                    <div id="site_statistics2" class="chart" style="padding: 0px; position: relative;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <@script>
        <@libs_highcharts_js/>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#site_statistics1').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Stacked column chart'
                },
                xAxis: {
                    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Total fruit consumption'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                    shared: true
                },
                plotOptions: {
                    column: {
                        stacking: 'percent'
                    }
                },
                series: [{
                    name: 'John',
                    data: [5, 3, 4, 7, 2]
                }, {
                    name: 'Jane',
                    data: [2, 2, 3, 2, 1]
                }, {
                    name: 'Joe',
                    data: [3, 4, 4, 2, 5]
                }]
            });
            $('#site_statistics2').highcharts({
                chart: {
                    type: 'area'
                },
                title: {
                    text: '用户数据曲线'
                },
                subtitle: {
                    text: '记录用户登录时段分析'
                },
                xAxis: {
                    categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                    tickmarkPlacement: 'on',
                    title: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: {
                        text: '数量'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
                    shared: true
                },
                plotOptions: {
                    area: {
                        stacking: 'percent',
                        lineColor: '#ffffff',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#ffffff'
                        }
                    }
                },
                series: [{
                    name: 'IOS端',
                    data: [502, 635, 809, 947, 1402, 3634, 5268]
                }, {
                    name: 'android端',
                    data: [106, 107, 111, 133, 221, 767, 1766]
                }]
            });
        });


    </script>
    </@script>
</body>
</@adminLayout>




